<template>
  <div style="display: float">
    <p class="text_left">
      <img src="..\..\assets\zhyq\阴天.png" />
      <span class="weather">阴天</span>
      <img src="..\..\assets\zhyq\温度.png" />
      <span class="weather">20°</span>
      <img src="..\..\assets\zhyq\摄氏度.png" />
      <span class="weather">20°</span>
      <img src="..\..\assets\zhyq\阴天.png" />
      <span class="weather">20°</span>
      <span class="weather">PM 2.5 59 良</span>
    </p>
    <el-radio-group
      v-model="radio1"
      style="float: left; margin-left: 268px"
      @change="changePart"
    >
      <el-radio-button label="车辆管理" type="text" class="text-button"
        ><img :src="车辆管理.Choose" class="img-button" id="车辆管理" />车辆管理
      </el-radio-button>
      <el-radio-button label="人员管理" type="text" class="text-button"
        ><img
          :src="人员管理.Choose"
          class="img-button"
          id="人员管理"
        />人员管理</el-radio-button
      >
      <el-radio-button
        label="总览"
        type="text"
        class="text-button isC"
        :autofocus="true"
        ><img
          :src="总览.Choose"
          class="img-button"
          id="总览"
        />总览</el-radio-button
      >
      <el-radio-button label="设备管理" type="text" class="text-button"
        ><img
          :src="设备管理.Choose"
          class="img-button"
          id="设备管理"
        />设备管理</el-radio-button
      >
      <!-- <el-radio-button label="能源管理" type="text" class="text-button"
        ><img
          :src="能源管理.Choose"
          class="img-button"
          id="能源管理"
        />能源管理</el-radio-button
      > -->
    </el-radio-group>
    <div class="text_right">
      <a-dropdown>
        <a class="set"> 视图模式 <a-icon type="down" /> </a>
        <a-menu slot="overlay" class="menu">
          <a-menu-item> 车间1 </a-menu-item>
          <a-menu-item> 车间2 </a-menu-item>
        </a-menu>
      </a-dropdown>
      <p class="set">设置</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio1: "总览",
      nowChoose: "总览",
      item: ["车辆管理", "人员管理", "总览", "设备管理"],
      num: 2,
      车辆管理: {
        isChoose: require("../../assets/zhyq/tubiao/车辆管理-选中-icon.png"),
        noChoose: require("../../assets/zhyq/tubiao/车辆管理-未选中-icon.png"),
        Choose: require("../../assets/zhyq/tubiao/车辆管理-未选中-icon.png"),
      },
      人员管理: {
        isChoose: require("../../assets/zhyq/tubiao/人员管理-选中-icon.png"),
        noChoose: require("../../assets/zhyq/tubiao/人员管理-未选中-icon.png"),
        Choose: require("../../assets/zhyq/tubiao/人员管理-未选中-icon.png"),
      },
      总览: {
        isChoose: require("../../assets/zhyq/tubiao/总览-选中-icon.png"),
        noChoose: require("../../assets/zhyq/tubiao/总览-未选中-icon.png"),
        Choose: require("../../assets/zhyq/tubiao/总览-选中-icon.png"),
      },
      设备管理: {
        isChoose: require("../../assets/zhyq/tubiao/设备管理-选中-icon.png"),
        noChoose: require("../../assets/zhyq/tubiao/设备管理-未选中-icon.png"),
        Choose: require("../../assets/zhyq/tubiao/设备管理-未选中-icon.png"),
      },
      能源管理: {
        isChoose: require("../../assets/zhyq/tubiao/能源管理-选中-icon.png"),
        noChoose: require("../../assets/zhyq/tubiao/能源管理-未选中-icon.png"),
        Choose: require("../../assets/zhyq/tubiao/能源管理-未选中-icon.png"),
      },
    };
  },
  mounted() {
    setInterval(() => {
      if (this.num == 3) {
        this.num = 0;
      } else {
        this.num++;
      }
      this.radio1 = this.item[this.num];
      this.changePart(this.item[this.num]);
    }, 20000);
  },
  methods: {
    changePart(key, n) {
      this.$emit("Partkey", key);
      this._data[key].Choose = this._data[key].isChoose;
      this._data[this.nowChoose].Choose = this._data[this.nowChoose].noChoose;
      this.nowChoose = key;
    },
  },
};
</script>
<style lang="less" scoped>
.set {
  border-radius: 15px;
  border: 1px solid #1af7ff;
  margin: auto 5px;
  padding: 0 15px;
  height: 28px;
  color: #1af7ff;
}
.ant-dropdown-menu-item,
.ant-dropdown-menu-submenu-title {
  color: #ffffff !important;
  font-size: 12px;
  text-align: center;
}
.ant-dropdown-menu-item:hover {
  background-color: rgba(0, 0, 0, 0.25) !important;
}
.menu {
  background-color: #142766 !important;
  border: 1px solid #1af7ff !important;
  border-radius: 0px !important;
}

.text_left {
  margin-left: 20px;
  margin-right: 5px;
  font-size: 16px;
  float: left;
  color: #ffffff;
  font-size: 16px;
  line-height: 49px;
}
.weather {
  color: #fff;
  margin: 0 10px;
}
.text_right {
  float: right;
  display: flex;
  font-size: 16px;
  color: #1af7ff;
  margin-right: 30px;
}
.img-button {
  margin: 0 10px;
}
/deep/.text-button {
  color: #1af7ff;
  font-size: 16px;
}
/deep/.el-radio-button__inner {
  background: transparent;
  border: 0px;
  color: #1af7ff;
}
/deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background-color: transparent;
  box-shadow: 0px 0 0 0 #409eff;
}
/deep/.el-radio-button:first-child .el-radio-button__inner {
  border: 0px;
}
</style>
